<template>
  <div>
    <van-search
      shape="round"
      placeholder="请输入搜索关键词"
      v-model="str"
      @keydown.enter="search(str)"
      @input="ipt"
      @clear="clear"
    />

    <!-- 搜索下容器 -->
    <div class="search_wrap" v-if="this.list1.length == 0">
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>

      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span
          class="hot_item"
          v-for="item in list"
          :key="item.id"
          @click="search(item.name)"
          >{{ item.name }}</span
        >
      </div>
    </div>
    <div class="search_wrap" v-else>
      <!-- 标题 -->
      <p class="hot_title">关键字搜索</p>

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 歌单区域 -->
        <van-cell
          center
          :title="obj.name"
          :label="obj.artists[0].name + '-' + obj.name"
          v-for="(obj, index) in list1"
          :key="index"
          @click="play(obj.id)"
        >
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="play-circle-o" size="0.6rem" />
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      list1: [],
      str: "",
      page: 1,
      finished: false,
      loading: false,
    };
  },
  methods: {
    clear() {
      this.page = 1;
      this.finished = false;
      this.loading = false;
    },
    ipt() {
      if (this.str == "") {
        this.list1 = [];
        this.page = 1;
        this.finished = false;
        this.loading = false;
      }
    },
    async search(name) {
      // 将点击的标签名字赋值给搜索框
      this.str = name;
      if (this.str == "") return;
      // 发送axios获取数据渲染页面
      let res = await this.getdata();

      // console.log(res.data.result.songs);
      this.list1 = res.data.result.songs;
    },
    play(id) {
      this.$router.push({
        path: "/play",
        query: {
          id: id,
        },
      });
    },
    getdata() {
      return this.$axios({
        url: "/search",
        params: {
          keywords: this.str,
          limit: 20,
          offset: (this.page - 1) * 20,
        },
      });
    },
    async onLoad() {
      this.page++;
      let res = await this.getdata();

      // console.log(res.data.result.songs);
      if (res.data.result.songs == undefined) {
        this.finished = true;
        this.loading = false;
        return;
      }

      this.list1.push(...res.data.result.songs);
      this.loading = false;
    },
  },
  async created() {
    let res = await this.$axios({
      url: "/top/artists",
      params: {
        limit: 10,
      },
    });
    this.list = res.data.artists;
    // console.log(res.data.artists);
  },
};
</script>

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

/* 给单元格设置底部边框 */
.van-cell {
  border-bottom: 1px solid lightgray;
}
</style>